<template>
	<view class="reward-container">
		<!-- 活动信息区域 -->
		<view class="activity-info">
			<text class="activity-title">{{activityInfo.title}}</text>
			<text class="activity-desc">{{activityInfo.desc}}</text>
			<view class="activity-time">
				<text class="time-label">活动时间</text>
				<text class="time-value">{{formatTime(activityInfo.start_at)}} 至 {{formatTime(activityInfo.end_at)}}</text>
			</view>
		</view>
		
		<!-- 红包区域 -->
		<view class="reward-section">
			<view class="reward-box" @click="handleGetReward" :class="{'disabled': !canGet}">
				<block v-if="activityInfo.has_get">
					<text class="reward-amount">￥{{activityInfo.amount}}</text>
					<text class="reward-text">已领取</text>
				</block>
				<block v-else>
					<text class="reward-text" v-if="activityInfo.status === 'unstart'">活动未开始</text>
					<text class="reward-text" v-if="activityInfo.status === 'ongoing'">点击领取红包</text>
					<text class="reward-text" v-if="activityInfo.status === 'end'">活动已结束</text>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/utils/request'

export default {
	data() {
		return {
			activityInfo: {
				title: '',
				desc: '',
				start_at: '',
				end_at: '',
				status: '',
				has_get: false,
				amount: null
			},
			isGetting: false,
			checkCount: 0,
			code: '',
		}
	},
	computed: {
		canGet() {
			return this.activityInfo.status === 'ongoing' && !this.activityInfo.has_get && !this.isGetting
		}
	},
	onShow() {
		this.getActivityInfo()
	},
    onLoad(options) {
        this.code = options.code
    },
	methods: {
		// 获取活动信息
		async getActivityInfo() {
			try {
				const res = await request({
					url: '/wechat/activity/detail',
					data: { code: this.code }
				})
				
				if (res.code === 0 && res.data) {
					this.activityInfo = res.data
				} else {
                    uni.showToast({
                        title: res.message || '领取失败',
                        icon: 'none'
                    })
                }
			} catch (err) {
				console.error('获取活动信息失败', err)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		
		// 处理领取红包
		async handleGetReward() {
			if (!this.canGet) return
			
			this.isGetting = true
			
			try {
				const res = await request({
					url: '/wechat/activity/rewardGet',
                    data: { code: this.code }
				})
				
				if (res.code === 0) {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
					this.checkRewardStatus()
				} else {
                    this.getActivityInfo()
                    throw new Error(res.message || '领取失败')
				}
			} catch (err) {
				console.error('领取红包失败', err)
				uni.showToast({
					title: err.message || '领取失败',
					icon: 'none'
				})
				this.isGetting = false
			}
		},
		
		// 检查领取状态
		async checkRewardStatus() {
			if (this.checkCount >= 10) {
				uni.showToast({
					title: '领取超时，请稍后再试',
					icon: 'none'
				})
				this.isGetting = false
				this.checkCount = 0
				return
			}
			
			try {
				const res = await request({
					url: '/wechat/activity/rewardCheck',
                    data: { code: this.code }
				})
				
				if (res.code === 0 && res.data && res.data.amount) {
					// 领取成功
					this.activityInfo.has_get = true
					this.activityInfo.amount = res.data.amount
					uni.showToast({
						title: '领取成功',
						icon: 'success'
					})
					this.isGetting = false
					this.checkCount = 0
				} else {
					// 继续查询
					this.checkCount++
					setTimeout(() => {
						this.checkRewardStatus()
					}, 3000)
				}
			} catch (err) {
				console.error('检查领取状态失败', err)
				this.isGetting = false
				this.checkCount = 0
			}
		},
		
		// 格式化时间
		formatTime(timeStr) {
			if (!timeStr) return ''
			const date = new Date(timeStr)
			const month = date.getMonth() + 1
			const day = date.getDate()
			const hour = date.getHours().toString().padStart(2, '0')
			const minute = date.getMinutes().toString().padStart(2, '0')
			return `${month}月${day}日 ${hour}:${minute}`
		}
	}
}
</script>

<style>
.reward-container {
	min-height: 100vh;
	background-color: #f6f7fb;
	padding: 30rpx;
}

.activity-info {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 40rpx;
}

.activity-title {
	font-size: 36rpx;
	color: #333333;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.activity-desc {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.6;
	margin-bottom: 20rpx;
	display: block;
}

.activity-time {
	display: flex;
	align-items: center;
	padding: 16rpx 24rpx;
	background-color: #f8f9fc;
	border-radius: 8rpx;
	margin-top: 20rpx;
}

.time-label {
	font-size: 24rpx;
	color: #666666;
	margin-right: 12rpx;
}

.time-value {
	flex: 1;
	font-size: 24rpx;
	color: #333333;
	font-weight: 500;
}

.reward-section {
	display: flex;
	justify-content: center;
	padding: 60rpx 0;
}

.reward-box {
	width: 300rpx;
	height: 300rpx;
	background: linear-gradient(135deg, #ff4d4f, #ff7875);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 16rpx rgba(255, 77, 79, 0.2);
	transition: all 0.3s;
}

.reward-box:active {
	transform: scale(0.95);
}

.reward-box.disabled {
	background: #cccccc;
	transform: none;
}

.reward-amount {
	font-size: 48rpx;
	color: #ffffff;
	font-weight: bold;
	margin-bottom: 16rpx;
}

.reward-text {
	font-size: 32rpx;
	color: #ffffff;
}
</style>
